<template>
  <div>
    <el-input v-model="searchParams.id" style="width: 240px" placeholder="根据学号检索"/>
    <el-input v-model="searchParams.name" style="width: 240px" placeholder="根据学生姓名检索"/>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="学号" width="100"/>
    <el-table-column prop="name" label="姓名" width="80"/>
    <el-table-column prop="age" label="年龄" width="50"/>
    <el-table-column prop="gender" label="性别" width="50">
      <template #default="scope">
        {{ scope.row.gender ? "男" : "女" }}
      </template>
    </el-table-column>
    <el-table-column prop="mobile" label="联系电话" width="100"/>
    <el-table-column prop="major" label="专业" width="120"/>
    <el-table-column prop="grade" label="年级" width="120"/>
    <el-table-column prop="class" label="班级" width="120"/>
    <el-table-column prop="college" label="学院" width="120"/>
    <el-table-column prop="college" label="" align="right">
      <template #default="scope">
        <el-button type="primary" size="small">
          编辑
        </el-button>
        <el-button type="danger" size="small">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">

import {ref} from "vue";

interface IStudent {
  id: string
  name: string
  age: string
  gender: number
  mobile: string
  major: string
  grade: string
  class: string
  college: string
}

interface ISearch {
  id: string
  name: string
  gender: number
  major: number
  grade: number
  class: number
  college: number
}

const tableData = ref<IStudent[]>([
  {
    id: "2022123123",
    name: "test",
    age: "20",
    gender: 1,
    mobile: "12345678911",
    major: "大数据",
    grade: "2022",
    class: "1班",
    college: "电子与信息学院"
  }
])
const searchParams = ref<ISearch>({
  class: 0,
  college: 0,
  gender: 0,
  grade: 0,
  id: "",
  major: 0,
  name: ""
})
</script>

<style scoped>

</style>